<template>
  <div>
    about
    <EChartsBarview :chartData_bar="chartData_bar" />
    <EChartsLineview :chartData_line="chartData_line"  />
    <EChartsPieview :chartData_pie="chartData_pie" />
    <EChartsLiquidFillview :chartData_liquidFill ="chartData_liquidFill " />
    <EchartsPie3Dview :data="chartData"  title="分类数据" :boxHeight="0.2" style="width: 600px; height: 400px;"/>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import EChartsBarview from './Echarts/Echarts_BarView.vue';
import EChartsLineview from './Echarts/Echarts_LineView.vue';
import  EChartsPieview  from "./Echarts/Echarts_PieView.vue";
import  EChartsLiquidFillview  from "./Echarts/Echarts_LiquidFillView.vue";
import  EchartsPie3Dview from "./Echarts/Echarts_Pie3DView.vue";

const chartData_bar = ref({
  xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        series: [60, 52, 200, 334, 390, 330, 220]
})

/*
折线图
const chartData_line = ref({
  xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  series: [100, 100, 100, 100, 100, 100, 200],
  series_1: [90, 90, 90, 90, 90, 90, 190],
});

// // 你可以根据需要动态更新 chartData_line
// setTimeout(() => {
//   chartData_line.value = {
//     xAxis: ['Mon_', 'Tue_', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
//   series: [200, 200, 200, 200, 200, 200, 100]
//   };
// }, 2000);
*/

const chartData_pie = ref({
  series: [
    { value: 1048, name: 'aaa' },
    { value: 735, name: 'b' },
    { value: 880, name: 'c' },
    { value: 484, name: 'd' },
    { value: 300, name: 'e' }
  ],
  title_text:'正标题'
})

/*
水球图
//定义初始数据
const chartData_liquidFill = ref({
  data: 0.6, // 水位值
  colors: ['#72D1FB', '#43ABF7'], // 波浪颜色
  borderColor: '#156ACF', // 外边框颜色
  backgroundColor: '#E3F7FF', // 背景颜色
  title_text: '初始标题' // 标题
});

//动态更新数据
setTimeout(() => {
  chartData_liquidFill.value = {
    data: 0.8, // 更新水位值
    colors: ['#FFD700', '#FFA500'], // 更新波浪颜色
    borderColor: '#FF4500', // 更新外边框颜色
    backgroundColor: '#FFFFF0', // 更新背景颜色
    title_text: '更新后的标题' // 更新标题
  };
}, 2000);
*/


const chartData = [
  { name: '分类1', value: 30 },
  { name: '分类2', value: 20 },
  { name: '分类3', value: 50 }
];

</script>
<style scoped>

</style>